/**
* Created by tanyichao on 2017/3/17.
*/
<template>
    <div class="page_container routerContent">
        <!--<x-header>评价</x-header>-->
        <scroller :height="-55+'px'" lock-x ref="scroller">
            <div class="assess_index">
                <div class="assess_top">
                    <div class="assess_top_title">
                        <img :src="orderInfoData.stStoreImg || orderInfoData.storeImg" alt="">{{ orderInfoData.stStoreName || orderInfoData.storeName}}
                    </div>
                    <div class="assess_top_info">商家服务评价</div>
                    <div class="assess_top_start">
                        <rater v-model="evaluationScore" slot="value" star="★" active-color="#FF9900"
                               :margin="4"></rater>
                    </div>
                    <div class="is-show-assess-input" v-if="showTextarea">
                        <!--<div class="assess_top_startInfo">-->
                        <!--<p class="assess_top_startInfoItem">食材新鲜</p>-->
                        <!--<p class="assess_top_startInfoItem">分量足</p>-->
                        <!--</div>-->
                        <div class="assess_content_input">
                                <x-textarea v-model="assessContent" :readonly="textareaReadonly" :max="60"
                                            placeholder="请留下您对我们的宝贵意见" id="area"></x-textarea>
                        </div>
                    </div>
                    <!--<div class="assess_top_btn vux-1px-t">-->
                    <!--<span>评价</span>-->
                    <!--</div>-->
                </div>
                <div class="assess_content">
                    <div class="assess_content_choose vux-1px-b">请选择想要推荐或者吐槽的产品</div>
                    <div class="assess_content_item" v-for="item in packages">
                        <div>
                            <img :src="item.packageImg" alt="">
                            <span class="taste">
                                <span>{{ item.packageName }}</span>
                                <span class="tasteText" v-if="item.taste.length > 0">购买口味:{{ item.taste }}</span>
                            </span>
                        </div>
                        <div>
                            <span class="assess_thumb"
                                  v-bind:class="[{ assess_follow: item.isActiveFollow }, assess_red_follow]"
                                  @click="activeFollow(item)"></span>
                            <span class="assess_thumb"
                                  v-bind:class="[{ assess_teasing: item.isActiveTeasing }, assess_red_teasing]"
                                  @click="activeTeasing(item)"></span>
                        </div>
                    </div>
                </div>
                <div class="assess_footer">
                    <div class="assess_content_infoItem" v-if="orderLength > 0">
                        <span>平均烹饪时长</span>
                        <span>{{ orderLength }}</span>
                    </div>
                    <div class="assess_content_infoItem" v-if="isAnonymous && appraise == '1'">
                        <span>您已经启用匿名评价</span>
                    </div>
                    <group v-if="appraise == '0'">
                        <x-switch title="匿名评价" v-model="isAnonymous"></x-switch>
                    </group>
                </div>
            </div>
        </scroller>
        <div class="assess_index_confirm">
            <div>感谢您的评价</div>
            <div @click="doCreateEvaluate(packages)" v-if="showCreateEvaluate">提交评价</div>
        </div>
        <toast v-model="isShowToast" type="text" :time="2000" is-show-mask :text="isShowToastText"
               position="top"></toast>
    </div>

</template>
<script>
    import {XHeader, Rater, Scroller, XSwitch, Group, XTextarea, Toast} from 'vux'

    import {showEvaluateService, createEvaluateService, getOrderInfoService} from '../services/index'

    export default {
        components: {
            XHeader,
            Rater,
            Scroller,
            XSwitch,
            Group,
            XTextarea,
            Toast,
        },
        updated(){
            this.$nextTick(() => {
                this.$refs.scroller.reset()
                console.log(this.$refs)
            })
        },
        data(){
            return {
                orderId: '',
                appraise: 0,
                msg:"",
                evaluationScore: 0,
                packages: [],
                newPackages: [],
                isAnonymous: false,
                isActiveFollow: true,
                isActiveTeasing: true,
                isShowToast: false,
                showCreateEvaluate: true,
                textareaReadonly: false,
                isShowToastText: '',
                assessContent: '',
                orderLength: 0,
                orderInfoData: {},
                assess_red_follow: 'assess_red_follow',
                assess_follow: 'assess_follow',
                assess_teasing: 'assess_teasing',
                assess_red_teasing: 'assess_red_teasing'

            }
        },
        activated(){
            if (this.$route.query.orderId) {
                this.orderId = this.$route.query.orderId;
                this.appraise = this.$route.query.appraise;
                this.msg = this.$route.query.msg;
                this.getOrderInfo();
            }
        },
        deactivated(){
            this.assessContent = '';
            this.evaluationScore = 0;
            this.isAnonymous = false;
            this.newPackages = [];
            this.$destroy(true)
        },
        mounted(){

            /**
             * John modify
             */
            // let body = document.body;
            // document.addEventListener("touchend",function(event){

            //     let active = document.activeElement;
            //     let area = document.getElementById("area") ? document.getElementById("area").getElementsByTagName("textarea")[0] : '';

            //     if(!area) return;

            //     if(active === area){
                    
            //     }

            // });

        },
        watch: {
            packages(old, now){
                if (old.length > 0) {
                    old.forEach((item, index) => {
                        if (!item.isEvaluate) {
                            this.showCreateEvaluate = true
                            return true;
                        } else {
                            this.showCreateEvaluate = false
                            return false;
                        }
                    })
                }
            }
        },
        created(){

        },
        methods: {
            showError(info){
                this.isShowToastText = info;
                this.isShowToast = true;
            },
            activeFollow(item){
                this.blurTextarea();
                if (item.isEvaluate) return;
                this.newPackages.forEach((x, i) => {
                    if (item.packageId == x.packageId && item.menuId == x.menuId && item.taste == x.taste) {
                        x.praise = '1';
                    }
                });
                this.packages.forEach((x, i) => {
                    if (item.packageId == x.packageId && item.menuId == x.menuId && item.taste == x.taste) {
                        x.isActiveFollow = false;
                        x.isActiveTeasing = true;
                        this.$set(this.packages, i, this.packages[i]);
                    }
                })
            },
            activeTeasing(item){
                this.blurTextarea();
                if (item.isEvaluate) return;
                this.newPackages.forEach((x, i) => {
                    if (item.packageId == x.packageId && item.menuId == x.menuId && item.taste == x.taste) {
                        x.praise = '-1';
                    }
                });
                this.packages.forEach((x, i) => {
                    if (item.packageId == x.packageId && item.menuId == x.menuId && item.taste == x.taste) {
                        x.isActiveFollow = true;
                        x.isActiveTeasing = false;
                        this.$set(this.packages, i, this.packages[i]);
                    }
                })
            },
            showEvaluate(){
                const packages = this.filterPackages(this.packages, false);
                showEvaluateService().save({orderId: this.orderId, packages: JSON.stringify(packages)}).then(res => {
                    const body = res.body;
                    if (body && body.code == 200) {
                        this.orderInfoData = body.data;
                        this.packages = this.filterPackagesFollow(body.data.packages);
                        this.newPackages = this.filterPackages(body.data.packages);
                        this.orderLength = body.data.orderLength;
                        this.evaluationScore = body.data.evaluationScore;
                        this.assessContent = body.data.content;
                        this.isAnonymous = body.data.isAnonymous == '0' ? false : true;

                    }
                });
            },
            getOrderInfo(){
                getOrderInfoService().save({orderId: this.orderId}).then(res => {
                    const body = res.body;
                    if (body && body.code == 200) {
                        if(this.msg && body.data.orderStatus == 2 && body.data.appraise == 1){
                            this.$router.replace({
                                name: 'showAssess',
                                query: {
                                    orderId: this.orderId,
                                    appraise: this.appraise,
                                    msg:this.msg
                                }
                            })
                            return;
                        }
                        this.packages = this.filterPackagesFollow(body.data.packages);
                        if (this.appraise == '1') {
                            this.showCreateEvaluate = false;
                            this.textareaReadonly = true;
                            this.showEvaluate();
                        }else{
                            this.orderInfoData = body.data;
                            this.newPackages = this.filterPackages(body.data.packages, true);
                            this.orderLength = body.data.orderLength;
                        }
                    }
                });
            },
            doCreateEvaluate(){
                const isSubmit = this.validationEvaluateForm();
                if (isSubmit > 0) {
                    return false;
                }
                const isAnonymousText = this.isAnonymous ? '1' : '0';
                const params = {
                    orderId: this.orderId,
                    content: this.assessContent,
                    evaluationScore: this.evaluationScore,
                    isAnonymous: isAnonymousText,
                    packages: JSON.stringify(this.newPackages)
                }
                createEvaluateService().save(params).then(res => {
                    const body = res.body;
                    if (body && body.code == 200) {
                        this.showError('您的评价提交成功!');
                        setTimeout(() => {
                            if(this.msg){
                                this.$router.replace({
                                    name: 'showAssess',
                                    query: {
                                        orderId: this.orderId,
                                        appraise:this.appraise,
                                        msg:this.msg
                                    }
                                })
                                return;
                            }
                            this.$router.back();
                        }, 1000)
                    }
                })
            },
            validationEvaluateForm(){
                let isSubmit = 0;
                if (this.evaluationScore < 1) {
                    this.showError('不要忘记评分哦!');
                    isSubmit++;
                    return isSubmit;
                }
//                this.newPackages.forEach((x, i) => {
//                    if (x.praise == '0') {
//                        this.showError('不要忘记给菜品点赞哦!');
//                        isSubmit++;
//                    }
//                });
                return isSubmit;
            },
            //packages 数据用来展示
            filterPackagesFollow(packages){
                let newPackages = [];
                if (packages.length > 0) {
                    packages.forEach((x, i) => {
                        if (x.praise == '1') {
                            x.isActiveFollow = false;
                            x.isActiveTeasing = true;
                            x.isEvaluate = true;
                            x.praise = x.praise;
                        } else if (x.praise == '-1') {
                            x.isActiveFollow = true;
                            x.isActiveTeasing = false;
                            x.isEvaluate = true;
                            x.praise = x.praise;
                        } else {
                            x.isActiveFollow = false;
                            x.isActiveTeasing = true;
                            x.praise = '1';
                        }
                        newPackages.push(x);
                    });
                }
                return newPackages;
            },
            //packages数据用来提交表单
            filterPackages(packages, action){
                let newPackages = [];
                if (packages.length > 0) {
                    packages.forEach((x, i) => {
                        let obj = {
                            packageId: x.packageId,
                            packageName: x.packageName,
                            menuId: x.menuId,
                            praise: x.praise,
                            taste: x.taste,
                            cdTasteId:x.cdTasteId
                        }
                        if (action && !obj.praise) {
                            obj.praise = '1';
                        }
                        newPackages.push(obj);
                    });
                }
                return newPackages;
            },
            blurTextarea(){
                const textarea = document.getElementsByTagName('textarea')[0];
                if(textarea){
                    textarea.blur();

                }
            }

        },
        computed: {
            showTextarea(){
                if (this.evaluationScore > 0) {
                    if (this.appraise == '1' && this.assessContent.length == 0) {
                        return false;
                    }
                    return true
                }
                return false;
            },
        },

    }
</script>
<style lang="less" rel="stylesheet/less">
    .weui-cell {
        border: 1px solid #e7e7e7;
        background: #e7e7e7;
    }

    textarea {
        font-size: 0.75rem !important;
        background: #e7e7e7;
    }
    .weui-cell_switch{
        background: #fff !important;
    }
    .weui-textarea{
        /*height: 90px !important;*/
    }
    .weui-textarea-counter {
        font-size: 0.75rem;
    }
    .weui-label{
        font-size: 0.75rem;
    }
    .assess_index {
        width: 100%;
        height: auto;
        .vux-no-group-title {
            margin-top: 5px;
        }
        .assess_top {
            width: 100%;
            height: auto;
            padding: 0.75rem 0rem;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            background-color: #fff;

            .is-show-assess-input {
                margin-top: 0.5rem;
            }
            .assess_top_title {
                display: flex;
                font-size: 0.8rem;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: center;
                margin-left: -30px;
                img {
                    width: 1.5rem;
                    height: 1.5rem;
                    margin-right: 0.5rem;
                    border-radius: 100%;
                }
            }
            .assess_top_info {
                font-size: 0.6rem;
                margin-top: 1rem;
            }
            .assess_top_start {
                margin-top: 1rem;
            }
            .assess_top_title span {
                display: inline-block;
                background: url("../assets/img/shopHead.png");
                width: 1.5rem;
                height: 1.5rem;
                background-size: 100% 100%;
                border-radius: 50%;
                margin-right: 0.5rem;
            }
            .assess_top_startInfo {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                margin-top: 1rem;
                margin-bottom: 1rem;
                p {
                    padding: 0.15rem 0.8rem;
                    font-size: 0.7rem;
                    border: 1px solid;
                    border-radius: 20px;
                    margin-right: 0.5rem;
                    color: #FA5A4C;
                    background: rgba(250, 90, 76, 0.1);
                }
            }
            .assess_top_btn {
                width: 100%;
                padding: 0.5rem;
                text-align: center;
                margin-top: 1rem;
                span {
                    display: inline-block;
                    height: 1.5rem;
                    width: 4.5rem;
                    background-color: #FA5A4C;
                    line-height: 200%;
                    text-align: center;
                    color: #fff;
                    font-size: 0.75rem;
                    border-radius: 5px;
                }
            }
        }
        .assess_content {
            width: 100%;
            height: auto;
            background-color: #fff;
            margin-top: 0.3rem;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            justify-content: flex-start;
            .assess_content_choose {
                height: 2rem;
                font-size: 0.7rem;
                color: #999;
                line-height: 2rem;
                text-align: center;
                margin-bottom: 0.25rem;
            }
            .assess_content_item {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items: center;
                padding: 0.25rem 0.5rem;
                >div {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-items: center;
                }
                >div:nth-child(1) {
                    width: 70%;
                    justify-content: flex-start;
                    img {
                        width: 2rem;
                        height: 2rem;
                    }
                    >span {
                        margin-left: 0.25rem;
                        font-size: 0.8rem;
                        display: flex;
                        flex-direction: column;
                        flex-wrap: nowrap;
                    }
                    .tasteText{
                        margin-top: 0.2rem;
                        font-size: 0.6rem;
                        color: #999;
                    }
                }
                >div:nth-child(2) {
                    width: 30%;
                    justify-content: space-between;
                    padding: 0 0.5rem;
                }
                .assess_thumb {
                    width: 0.85rem;
                    height: 0.85rem;
                    position: relative;
                }
                .assess_thumb:after,.assess_thumb:before{
                    position: absolute;
                    content: '';
                    top: -10px;
                    bottom: -10px;
                    left: -10px;
                    right: -10px;
                }
                .assess_red_follow {
                    background: url("../assets/img/icon-follow-up.png");
                    background-size: 100% 100%;
                }
                .assess_follow {
                    background: url("../assets/img/follow.png");
                    background-size: 100% 100%;

                }
                .assess_red_teasing {
                    background: url("../assets/img/icon-teasing-down.png");
                    background-size: 100% 100%;
                }
                .assess_teasing {
                    background: url("../assets/img/teasing.png");
                    background-size: 100% 100%;

                }
            }
        }
    }

    .assess_content_infoItem {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        background-color: #fff;
        margin-top: 0.25rem;
        padding: 10px 15px;
        font-size: 0.75rem;

        span:nth-child(2) {
            color: #999;
        }
    }

    .assess_index_confirm {
        position: absolute;
        bottom: 0px;
        right: 0px;
        left: 0px;
        height: 2.5rem;
        font-size: 0px;
        background-color: #fff;
        padding-left: 15px;

        div {
            display: inline-block;
            font-size: 0.75rem;
            line-height: 300%;
        }
        div:nth-child(1) {
            width: 70%;
            height: 100%;
        }
        div:nth-child(2) {
            width: 30%;
            height: 100%;
            text-align: center;
            background-color: #fb7738;
            color: #fff;
        }
    }
</style>
